import React from 'react';
import { Card, Row, Col, Statistic } from 'antd';
import { BarChartOutlined, LineChartOutlined, PieChartOutlined, RiseOutlined } from '@ant-design/icons';
import './index.less';

const Dashboard: React.FC = () => {
  return (
    <div className="dashboard-container">
      <Card bordered={false} title="数据智慧大屏 - 平台">
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <Card className="data-card">
              <Statistic 
                title="今日诊疗人次" 
                value={2584} 
                prefix={<RiseOutlined />} 
                valueStyle={{ color: '#3f8600' }}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card className="data-card">
              <Statistic 
                title="转诊率" 
                value={15.4} 
                suffix="%" 
                prefix={<BarChartOutlined />}
                valueStyle={{ color: '#0050b3' }}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card className="data-card">
              <Statistic 
                title="数据上传量" 
                value={1432} 
                prefix={<LineChartOutlined />}
                valueStyle={{ color: '#722ed1' }}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card className="data-card">
              <Statistic 
                title="质量达标率" 
                value={92.7} 
                suffix="%" 
                prefix={<PieChartOutlined />}
                valueStyle={{ color: '#faad14' }}
              />
            </Card>
          </Col>
        </Row>
        
        <div className="chart-container">
          <h3>健康数据趋势图表将显示在这里</h3>
          <div className="chart-placeholder">
            大屏数据可视化图表区域
          </div>
        </div>
      </Card>
    </div>
  );
};

export default Dashboard; 
